<template>
  <div>
    <div class="top">{{ info.title }}广播电视发射塔大数据平台</div>
    <div class="nav_btn">
      <div class="btn_left">

        <DT class="btn_list" style="width:65%"/>

        <ShakeButton
            :needShake="isDanger"
            @notDanger="notDanger"
            @beclick="disTowerListVisiable=true"
        />
        <!--          </el-col>-->
        <!--        </el-row>-->
      </div>
      <div class="btn_right">
        <a @click="toHome">
          <div class="btn_list">重置页面</div>
        </a>
        <a @click="towerListVisiable=true">
          <div class="btn_list">铁塔列表</div>
        </a>
        <a @click="toManage">
          <div class="btn_list">后台管理</div>
        </a>
      </div>
    </div>

    <!--		弹窗 -->
    <Dialog
        top="2vh"
        :visiable="towerListVisiable"
        @close="closeTowerListDialog"
        :info="{title:'铁塔列表',width:'85%'}"
    >
      <!--	    <towerForm />-->
      <towerListForm :resetSelect="resetSelect"/>
    </Dialog>
    <Dialog
        :visiable="disTowerListVisiable"
        @close="closeDisTowerListDialog"
        :destroyOnClose="true"
        :info="{title: '受影响塔列表',width: '85%'}"
    >
      <!--	    <towerForm />-->
      <disTowerListForIndex
          :resetSelect="resetSelect"
          :updateFlag="updateListForUrgent"
          :adcodeInfo="adcodeInfo"
      />
    </Dialog>
  </div>
</template>
<script>
  import DT from "../../Icon/datav/DateTime";
  import ShakeButton from "./ShakeButton";

  // -------------------- from ---------------------
  import towerListForm from "../../views/bigScreen/form/towerListForIndex";
  import disTowerListForIndex from "../../views/bigScreen/form/disTowerListForIndex";
  import towerForm from "../../views/admin/tower/list";
  // ------------------ element-ui ----------------------------
  import Dialog from "../element-ui/dialog";

  export default {
    components: {
      DT, ShakeButton, towerListForm, towerForm, Dialog, disTowerListForIndex
    },
    data() {
      return {
        towerListVisiable: false,
        disTowerListVisiable: false,
        resetSelect: false
      };
    },
    methods: {
      closeDisTowerListDialog: function() {
        this.disTowerListVisiable = false;
        this.resetSelect = !this.resetSelect;
      },
      closeTowerListDialog: function() {
        this.towerListVisiable = false;
        this.resetSelect = !this.resetSelect;
      },
      toHome: function() {
        location.reload();
      },
      toHistory: function() {
        this.$router.push({
          path: '/tower/index',
          query: {
            index: null,
          }
        });
      },
      toManage: function() {
        this.$router.push({
          path: '/tower/index',
          query: {
            index: null,
          }
        });
      },
      notDanger: function() {
      },
      /**
       * 点击打开灾害塔列表
       */
      disaterClick: function() {

      }
    },
    props: {
      info: {
        type: Object,
        default: () => {
          return {
            title: ""
          };
        }
      },
      isDanger: {
        type: Boolean,
        default: false
      },
      updateListForUrgent: {
        type: Boolean,
        default: false
      },
      adcodeInfo: {
        type: Object,
        default: () => {
          return {};
        }
      }
    }
  };
</script>
<style scoped>
.top {
  background: url("../../assets/top.png") no-repeat;
  position: relative;
  top: 0.5vw;
  width: 100%;
  height: 5vw;
  background-size: 100%;
  text-align: center;
  line-height: 4vw;
  color: #0efcff;
  font-size: 1.5vw;
  letter-spacing: 0.1vw;
}

.nav_btn {
  position: absolute;
  top: 1.5vw;
  width: 100%;
  height: 2vw;
}

.con-info {
  color: #0efcff;
  padding: 0px;
}

.con-info-2 {
  color: #0efcff;
  padding: 0px;
}

.btn_left {
  float: left;
  width: 25%;
  margin-left: 5%;
  height: 5vh;
}

.btn_right {
  float: right;
  width: 25%;
  margin-right: 5%;
  height: 100%;
}

.btn_list {
  position: relative;
  float: left;
  /*width: 5.5vw; */
  margin: .5vh;
  width: 7vw;
  height: 1.6vw;
  text-align: center;
  line-height: 1.6vw;
  font-size: 0.9vw;
  color: #0efcff;
  letter-spacing: 0.1vw;
  cursor: pointer;
}


.btn_left a,
.btn_right a {
  display: inline-block;
}

.btn_left a:nth-child(2) {
  margin: 0 0.6vw;
}

.btn_left a:nth-child(4) {
  margin-left: 0.6vw;
}

.btn_right a:nth-child(2) {
  margin: 0 0.6vw;
}

.btn_right a:nth-child(4) {
  margin-left: 0.6vw;
}

.btn_list:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #6176af;
  transform: skewX(-38deg);
}

.btn_list:hover::before {
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.listActive:before {
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.counter {
  position: relative;
  left: -10vw;
  top: 3vh;
}

.con-week {
  color: aqua;
  position: relative;
  left: 0vw;
  height: 0vh;
}
</style>
